<template>
  <div id="app">
    <div class="header">
      <img
        id="header_img"
        @click="goHome"
        src="../public/imgs/atom.png"
        title="返回首页"
      />
      <div id="header_title" @click="goHome" title="返回首页">
        基于结构相似性的无监督药物-靶点相互作用预测
      </div>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  methods: {
    goHome() {
      this.$router.push({
        name: "home",
      });
    },
  },
};
</script>
<style>
body {
  margin: 0;
  padding: 0;
}
#app {
  user-select: none;
}
.header {
  position: fixed;
  display: flex;
  width: 100%;
  height: 60px;
  line-height: 60px;
  top: 0;
  align-items: center;
  background-color: #10a7ff;
  z-index: 1000;
}
#header_img {
  width: 2.725rem;
  margin-left: 2.5rem;
  cursor: pointer;
}
#header_title {
  cursor: pointer;
  color: #ffffff;
  margin-left: 1.25rem;
  font-size: 1.42rem;
}
</style>
